<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="head">
        <script type="text/javascript">
            // Blue : #3E98D3  |  Red : #EF3F61  |  Green : #2BB673  |  Orange : #F15732

            function skinChart() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinBar() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    renderer: $.jqplot.BarRenderer,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinArea() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#EF3F61', '#2BB673'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinBubble() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    renderer: $.jqplot.BubbleRenderer,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinZoom() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinPie() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77',
                    }
                };
                this.cfg.seriesDefaults = {
                    renderer: $.jqplot.PieRenderer,
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinDonut() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77',
                    }
                };
                this.cfg.seriesDefaults = {
                    renderer: $.jqplot.DonutRenderer,
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinBarAndLine() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#3E98D3', '#EF3F61'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 5,
                    renderer: $.jqplot.BarRenderer,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinMeterGauge() {
                this.cfg.title = '';
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 5,
                    renderer: $.jqplot.MeterGaugeRenderer,
                    rendererOptions: {
                        shadow: false,
                        min: 100,
                        max: 800,
                        intervals: [200, 300, 400, 500, 600, 700, 800],
                        intervalColors: ['#3E98D3', '#EF3F61', '#2BB673', '#F15732', '#3E98D3', '#EF3F61', '#2BB673']
                    }
                }
            }

            function skinMultiAxis() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    renderer: $.jqplot.BarRenderer,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }
        </script>
        <style type="text/css">
            .jqplot-target, .jqplot-axis {
                color: #546E7A;
            }
        </style>
    </ui:define>

    <ui:define name="content">
        <div class="Container50 Responsive100 NoIndent">
            <div class="Container100">
                <div class="Card">
                    <div class="CardTopic TexAlCenter">Linear Chart</div>
                    <div class="SeparatorFull"/>
                    <p:chart id="line" type="line" model="#{chartView.lineModel}" responsive="true"/>
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardTopic TexAlCenter">Bar Chart</div>
                    <div class="SeparatorFull"/>
                    <p:chart id="bar" type="bar" model="#{chartView.barModel1}" responsive="true"/>
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardTopic TexAlCenter">Area Chart</div>
                    <div class="SeparatorFull"/>
                    <p:chart id="area" type="line" model="#{chartView.areaModel}" responsive="true" />
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardTopic TexAlCenter">Bubble Chart</div>
                    <div class="SeparatorFull"/>
                    <p:chart id="bubble" type="bubble" model="#{chartView.bubbleModel}" responsive="true"/>
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardTopic TexAlCenter">Zoom Chart</div>
                    <div class="SeparatorFull"/>
                    <p:chart id="date" type="line" model="#{chartView.zoomModel}" responsive="true"/>
                </div>
            </div>
        </div>

        <!-- -->

        <div class="Container50 Responsive100 NoIndent">
            <div class="Container100">
                <div class="Card">
                    <div class="CardTopic TexAlCenter">Pie Chart</div>
                    <div class="SeparatorFull"/>
                    <p:chart id="pie" type="pie" model="#{chartView.pieModel}" responsive="true" />
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardTopic TexAlCenter">Donut Chart</div>
                    <div class="SeparatorFull"/>
                    <p:chart id="donut" type="donut" model="#{chartView.donutModel}" responsive="true" />
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardTopic TexAlCenter">Bar And Line Chart</div>
                    <div class="SeparatorFull"/>
                    <p:chart id="combined" type="bar" model="#{chartView.combinedModel}" responsive="true" />
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardTopic TexAlCenter">Multi Axis Chart</div>
                    <div class="SeparatorFull"/>
                    <p:chart id="multiAxis" type="line" model="#{chartView.multiAxisModel}" responsive="true"/>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>